<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入Bootstrap样式表 -->
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/user.css">
<title>评价页面</title>

<style>
/* 设置整体背景 */
body {
	background-image:
		url('https://ts1.cn.mm.bing.net/th/id/R-C.df0ae99c837dd53d201c6c898833e647?rik=9UYsRJomFW3zFg&riu=http%3a%2f%2fwww.pooban.com%2fimages%2f201511%2fgoods_img%2f2056_G_1446852370863.png&ehk=hOZFnvJcDYw46j%2fvuewxxwaf%2bHAYB3zdIthlMXWyes0%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.circle-img {
	/* 设置图片宽度和高度 */
	width: 65px; /* 这里设置图片的宽度 */
	height: 65px; /* 这里设置图片的高度 */
	/* 将图片裁剪成圆形 */
	border-radius: 50%;
	border: 2px solid #fff;
}
</style>


</head>
<body>

	<!-- 导航栏 -->
	<nav class="navbar navbar-expand-lg">
		<a class="navbar-brand" href="#">书影音</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarNav" aria-controls="navbarNav"
			aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/home"/>">首页 <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/book"/>">读书</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/movie"/>">影视</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/music"/>">音乐</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/filter"/>">筛选</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/user"/>">我的</a></li>
			</ul>
			<c:if test="${not empty sessionScope.user}">
				<a class="nav-link" style="color: white"
					href="<c:url value = "/user"/>">欢迎您，${user.username }</a>
			</c:if>
			<form class="form-inline my-2 my-lg-0" method="POST"
				action="<c:url value = "/search"/>">
				<input class="form-control mr-sm-2 bg-transparent" type="search"
					name="title" placeholder="搜索" aria-label="搜索">
				<button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
			</form>
		</div>
	</nav>

	<br>
	<div class="container">
		<h3 class="mt-0">
			名称：
			<c:out value="${media.title}" />
		</h3>
		<div>
			<div class="row">
				<div class="col-sm-6">
					<div class="media">
						<div class="media-body">

							<img src="${media.imageUrl }" alt="${media.title}"
								class="mr-3 mt-3" style="width: 90px;">
						</div>
					</div>
				</div>
				<!-- 右侧文本框 -->
				<div class="col-sm-6">
					<h4>
						发布时间：<span><c:out value="${media.releaseDate}" /></span>
					</h4>
					<h4>
						作者：<span><c:out value="${media.author}" /></span>
					</h4>
					<h4>
						标签：<span><c:out value="${media.tag}" /></span>
					</h4>
				</div>
			</div>
		</div>
	</div>

	<br>
	<br>

	<div class="container">
		<h3 class="mt-0">
			评分：
			<c:out value="${media.averageRating}" />
		</h3>
		<br>
		<h3>简介：</h3>
		<p>
			<c:out value="${media.description}" />
		</p>
		<hr>
	</div>




	<!-- 评论表单 -->
	<div class="container mt-3">
		<h2>在这里发表你的看法：</h2>
		<form action="comment_post" method="post">
			<input type="hidden" name="mediaId" value="${media.id }" /> <input
				type="hidden" name="userId" value="${user.id }" />
			<div class="form-group">
				<label for="content"><h4>内容:</h4></label>
				<textarea class="form-control" id="content" name="text" rows="3"
					placeholder="请在这里输入内容..." required></textarea>
			</div>
			<div class="form-group">
				<label for="rating"><h4>评分:</h4></label> <select
					class="form-control" id="rating" name="rating" required>
					<option>5</option>
					<option>4</option>
					<option>3</option>
					<option>2</option>
					<option>1</option>
				</select>
			</div>
			<button type="submit" class="btn btn-primary">提交</button>
		</form>
		<hr>
	</div>

	<div class="">
		<div class="row">
			<div class="col-md-8 offset-md-2">
				<h1 class="mt-5 mb-4">评论区</h1>
				<ul class="list-unstyled">
					<c:forEach items="${commentList}" var="comment">
						<li id="comment_<c:out value="${comment.id}"/>">
							<div class="media py-3 shadow p-3 mb-5 bg-white rounded">
								<img src="resources/miaow.png" class="mr-3 circle-img border"
									alt="${comment.user.username }" style="margin: 10px">
								<div class="media-body">
									<h5 class="mt-0 mb-1">${comment.user.username }<span>评分：${comment.rating }</span>
									</h5>
									<p class="commentText overflow-auto">
										<c:out value="${comment.commentText}" />
									</p>
									<div class="d-flex justify-content-between align-items-center">
										<small class="text-muted commentDate"><c:out
												value="${comment.commentDate}" /></small>

									</div>
								</div>
							</div>
						</li>
					</c:forEach>
				</ul>
			</div>
		</div>
	</div>

	<br>
	<br>
	<!-- 页脚 -->
	<footer class=" text-center py-3"> &copy; 2023 书影音 </footer>

	<!-- 引入Bootstrap的JavaScript和Popper.js，用于处理导航栏的交互效果 -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>
